<template>
  <div>
    <div class="w">
      <div class="user">
        <div class="user-son">
          <p>YSJX</p>
          <div class="img">
            <img
              src="../assets/img/touxiang.jpg"
              width="84px"
              height="84px"
              alt=""
            />
          </div>
        </div>
        <div class="resume">
          <p>2022-07-04加入·IP属地：广东</p>
          <p>添加个人简历，让厨友更了解你</p>
        </div>
        <div class="user-bd">
          <ul>
            <li>
              <p>0</p>
              <p>关注</p>
            </li>
            <li>
              <p>0</p>
              <p>粉丝</p>
            </li>
          </ul>
        </div>
      </div>

      <div class="establish">
        <div class="establish-son">
          <a href="#" class="con">菜谱</a>
          <a href="#">作品</a>
        </div>
        <div class="establish-hd" v-if="!establishList">
          <p>创建菜谱的人是厨房里的天使</p>
        </div>
        <div class="myCaipu" v-if="establishList">
          <ul>
            <li v-for="(item,index) in establishList" :key="index" @click="toMycaid(item.id)">
              <div class="myCaipuImg">
                <img :src="item.picture" height="100%" alt="" />
              </div>
              <div class="myCaipuName">{{item.foodName}}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      establishList: null,
    };
  },
  methods: {
    baocun() {
      this.chuanjian = true;
    },
    toMycaid(id){
      this.$emit("toMycaid")
      this.$router.push({
          path: "myCaidan",
          query: {
            id
          },
        });
    }
  },
  created() {
    this.establishList = JSON.parse(
      window.localStorage.getItem("establishlist")
    );
  },
};
</script>

<style>
@import "../assets/css/personal.css";
</style>